<template>
  <router-view />
</template>

<script setup lang="ts">
import { watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import {useSiteSettings} from 'src/stores/site_setting'

// 初始化语言
const siteSettings = useSiteSettings()

const { locale } = useI18n({
    useScope: 'global'
})
locale.value = siteSettings.language

// 初始化主题
const $q = useQuasar()
$q.dark.set(siteSettings.dark)

// 监视网站设置变化
watch(siteSettings, (newValue) => {
  $q.dark.set(newValue.dark)
  locale.value = newValue.language
})
</script>

<style lang="scss">
html {
  overflow-y: visible;
  overflow-x: hidden;
  --header_height: $header_height;
}

body {
  width: 100vw;
  background-color: var(--q-background) !important;
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 0.2em;
  background-color: var(--q-primary);

  &:hover {
    /*滚动条里面小方块*/
    background-color: var(--q-primary);
  }
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}
</style>
